<template>
	<view class="login">
		<view class="login-body">
			<view class="info">
				<view class="form-rows">
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/phone.png" mode="widthFix" class="form-row-icon"></image>
						<input type="text" placeholder="请输入手机号码" placeholder-class="input-placeholder" class="form-row-input" v-model="form.mobile" />
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/yanzhengma.png" mode="widthFix" class="form-row-icon"></image>
						<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" class="form-row-input" v-model="form.code" />
						<view class="code-container">
							<u-code ref="uCode1" startText="验证码" :seconds="sms_time_out" @change="codeChange" keep-running change-text="Xs"
								@start="disabled = true" @end="disabled = false"></u-code>
							<button size="mini" @tap="getCode" :disabled="disabled" class="code-btn">{{tips}}</button>
						</view>
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/mima.png" mode="widthFix" class="form-row-icon"></image>
						<input type="password" placeholder="请输入新密码" placeholder-class="input-placeholder" class="form-row-input" v-model="form.password" />
					</view>
					<view class="form-row">
						<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/login/mima.png" mode="widthFix" class="form-row-icon"></image>
						<input type="password" placeholder="请确认新密码" placeholder-class="input-placeholder" class="form-row-input" v-model="form.conpassword" />
					</view>
				</view>
				<view class="form-btns">
					<button class="login-btn" @click="tijiao" :disabled="btnDisabled">确定</button>
					<view style="height: 60rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var validate = require("@/components/validate/validate.js");
	var _this;
	export default {
		data() {
			return {
				form:{
					//手机号
					mobile:'',
					//验证码
					code:'',
					//密码
					password:'',
					//确认密码
					conpassword:'',
					step:1
				},
				tips: '',
				sms_time_out:60,
				disabled: false,
				btnDisabled: false,
			}
		},
		onLoad() {
			_this=this
			if(this.user_id>0){
				// this.$u.route({
				// 	url: "pages/center/center",
				// 	type: "switchTab"
				// })
			}
			this.submitForm()
		},
		methods: {
			//跳转到注册页面
			loginto() {
				uni.navigateBack()
			},
			//获取验证码
			codeChange(text) {
				this.tips = text;
			},
			//重置密码
			async tijiao() {
				this.form.step=2
				this.submitForm()
			},
			async submitForm(){
				if (this.form.step == 2) {
					var rule = [{
						// 字段名
						name: 'mobile',
						rules: ['require', 'mobile'],
						errorMsg: {
							require: '手机号码不能为空',
							mobile: '手机号码格式有误',
						}
					}, 
					{
						// 字段名
						name: 'code',
						rules: ['require', 'integer', 'min:6'],
						errorMsg: {
							require: '请输入验证码',
							integer: '验证码只能为数字',
							min: '验证码为6位'
						}
					},
					{
						// 字段名
						name: 'password',
						rules: ['require', 'min:6'],
						errorMsg: {
							require: '新密码不能为空',
							min: '新密码最少6位'
						}
					},
					{
						// 字段名
						name: 'conpassword',
						rules: ['require', 'confirm:password'],
						errorMsg: {
							require: '请输入确认新密码',
							confirm: '两次密码输入不一致'
						}
					}];
					// 是否全部通过，返回Boolean
					let checked = validate.check(this.form, rule);
					if (!checked) {
						// 获取错误信息
						let err = validate.getError();
						uni.$u.toast(err[0])
						return;
					}
					_this.btnDisabled=true
				}
				const data = await _this.$post('api/do_forget',this.form)
				if (data.code == 200) {
					this.$u.toast(data.msg)
					setTimeout(res=>{
						uni.navigateBack({})
					},2000)
				} else if (data.code == 10) {
					this.sms_time_out = data.data.sms_time_out
				} else {
					this.$u.toast(data.msg)
				}
				setTimeout(res=>{
					_this.btnDisabled=false
				},2000)
			},
			async getCode() {
				//单独验证使用
				let check = validate.checkResult('mobile', this.form.mobile);
				if (!check) {
					uni.$u.toast("手机号码格式有误")
					return
				}
				if (this.$refs.uCode1.canGetCode) {
					const params = {
						mobile: this.form.mobile,
						scene: 3
					}
					const data = await _this.$post('api/GetCode',params)
					if (data.code == 200) {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode1.start();
					} else {
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast(data.msg);
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/login.scss";
</style>
